<template>
  <div class="app-container bg-gray">
    <transition name="fade-transform" mode="out-in">
      <router-view />
    </transition>
    <div v-loading="loading" v-if="isShow">
      <el-row>
        <el-card class="box-1">
          <el-row class="header">
            <div class="text-center">
              <el-popover
                placement="top-start"
                title="成单率说明：(不包含当天数据)"
                width="400"
                trigger="hover">
                <p>本月成单率: 本月激活客户数 / 本月指派客户数</p>
                <p>总成单率: 总激活客户数 / 总客户数</p>
                <label slot="reference">运营概况  <i class="el-icon-info"/></label>
              </el-popover>

              <el-button type="primary" size="mini" class="info-btn" @click="infoClick">详细信息</el-button>
            </div>
          </el-row>
          <el-row class="row">
            <el-col :span="4">
              <div>今日客户量</div>
              <div>{{ info['today_customer'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>本月客户量</div>
              <div>{{ info['month_customer'] || 0 }}</div>
            </el-col>
            <!--<el-col :span="4">
              <div>今日业绩</div>
              <div>{{ info['today_bonus_number'] || 0 }}</div>
            </el-col>-->
            <el-col :span="4">
              <div>本月业绩</div>
              <div>{{ info['month_bonus_number'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>本月成单量</div>
              <div>{{ info['month_member'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>本月成单率</div>
              <div>{{ info['month_conversion'] || 0 }}%</div>
            </el-col>
            <el-col :span="4">
              <div>本月丢单率</div>
              <div>{{ info['month_no_conversion'] || 0 }}%</div>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="4">
              <div>昨日客户量</div>
              <div>{{ info['yesterday_customer'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>上月客户量</div>
              <div>{{ info['last_month_customer'] || 0 }}</div>
            </el-col>
            <!--<el-col :span="4">
              <div>昨日业绩</div>
              <div>{{ info['yesterday_bonus_number'] || 0 }}</div>
            </el-col>-->
            <el-col :span="4">
              <div>上月业绩</div>
              <div>{{ info['last_month_bonus_number'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>上月成单量</div>
              <div>{{ info['last_month_member'] || 0 }}</div>
            </el-col>
            <el-col :span="4">
              <div>总成单率</div>
              <div>{{ info['conversion'] || 0 }}%</div>
            </el-col>
            <el-col :span="4">
              <div>总丢单率</div>
              <div>{{ info['no_conversion'] || 0 }}%</div>
            </el-col>
          </el-row>

          <el-table :data="info['source']" max-height="250">
            <el-table-column label="不同来源客户概况" header-align="center" align="center">
              <el-table-column label="来源" prop="source_name" header-align="center" align="center" />
              <el-table-column label="本日数量" prop="today_customer" header-align="center" align="center" />
              <el-table-column label="昨日数量" prop="yesterday_customer" header-align="center" align="center" />
              <el-table-column label="本月数量" prop="month_customer" header-align="center" align="center" />
              <el-table-column label="上月数量" prop="last_month_customer" header-align="center" align="center" />
              <el-table-column label="本月成单率" prop="month_conversion" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row['month_conversion'] || 0 }}%
                </template>
              </el-table-column>
              <el-table-column label="本月丢单率" prop="month_no_conversion" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row['month_no_conversion'] || 0 }}%
                </template>
              </el-table-column>
              <el-table-column label="总成单率" prop="conversion" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row['conversion'] || 0 }}%
                </template>
              </el-table-column>
              <el-table-column label="总丢单率" prop="no_conversion" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row['no_conversion'] || 0 }}%
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>

      <div class="lineChartBox">
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card>
              <div slot="header" class="text-center">
                <span>客户量 - 曲线图</span>
              </div>
              <line-chart :chart-data="info['customer_list']" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card>
              <div slot="header" class="text-center">
                <span>业绩 - 曲线图</span>
              </div>
              <line-chart :chart-data="info['customer_number']" />
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-card>
              <div slot="header" class="text-center">
                <span>成单率/丢单率 - 曲线图（%）</span>
              </div>
              <line-chart :chart-data="info['order_from']" />
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from '../components/LineChart';

export default {
  components: {
    LineChart
  },
  data() {
    return {
      isShow: false,
      loading: false,
      info: {
        // customer_list: lineChartData.lineData,
        // bonus_number: lineChartData.lineData,
        // order_from: lineChartData.lineData
        customer_list: [],
        customer_number: [],
        order_from: []
      }
    }
  },
  watch: {
    $route(to) {
      // console.log(to.name);
      if (to.name === '平台运营数据') {
        this.isShow = true;
        this.getPlatformData();
      }
    }
  },
  created() {
    if (this.$route.name === '平台运营数据') {
      this.isShow = true;
      this.getPlatformData();
    }
  },
  methods: {
    infoClick() {
      this.isShow = false;
      this.$router.push({
        path: '/workbench/operation/department'
      });
    },

    // 获取平台运营数据
    getPlatformData() {
      this.loading = true;
      const url = 'platform/index';
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.loading = false;
        // console.log(res.data);
        Object.assign(this.info, res.data);
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.box-1 {
  .header {
    background: #f5f7fa;
    border: 1px solid #ebeef5;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
    color: #909399;
    .info-btn {
      position: absolute;
      top: 9px;
      right: 9px;
    }
  }
  .row {
    border: 1px solid #ebeef5;
    border-top: 0;
    .el-col {
      padding: 8px 0;
      border-right: 1px solid #ebeef5;
      &:last-child {
        border-right: 0px;
      }
      > div {
        text-align: center;
        margin: 8px 0;
        font-size: 11px;
        color: #434343;
        &:last-child {
          font-size: 20px;
          margin-top: 10px;
          margin-bottom: 0;
        }
      }
    }
  }
}

.lineChartBox {
  padding-top: 20px;
}
</style>
